<template>
  <div class="">
    <div>
      <topNav />
    </div>

    <div class="container">
      <div class="search-msg">
        搜索&nbsp;<span style="color: #ff0000">{{ $route.query.msg }}</span
        >&nbsp;有以下结果
      </div>
      <el-divider></el-divider>
      <div class="search-type">
        <span
          v-for="(item, index) in list"
          :key="index"
          :class="[index === active ? 'active' : '']"
          @click="tab(index)"
          >{{ item }}</span
        >
      </div>
      <el-divider></el-divider>
      <div class="range">
        <div style="display: flex; align-items: center; width: 50%">
          <div>租金范围</div>
          <div style="margin-left: 2%">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;￥</span>
            <input type="text" v-model.trim="smallPrice" />
            <span>~</span>
            <input type="text" v-model.trim="bigPrice" />
            <span>/天起</span>
          </div>
        </div>

        <div
          style="
          display: flex;
            width: 50%;
            align-items: center;
            justify-content: flex-end;"
        >
          <span>物流服务&nbsp;&nbsp;&nbsp;</span>
          <span
            v-for="(item, index) in express"
            :key="index"
            :class="['express', index === active1 ? 'active1' : '']"
            @click="tabExpress(index)"
            >{{ item }}</span
          >
        </div>
      </div>
    </div>

    <div>
      <goods-card :goodsList="goodsList" />
    </div>
    <div>
      <bottom />
    </div>
  </div>
</template>

<script>
import topNav from "../components/topNav.vue";
import bottom from "../components/bottom.vue";
import goodsCard from "../components/goodsCard.vue";
export default {
  components: {
    topNav,
    bottom,
    goodsCard,
  },
  data() {
    return {
      active: 0,
      active1: 0,
      smallPrice: "",
      bigPrice: "",
      list: ["默认排序", "价格升序", "价格降序", "最新上架"],
      express: ["包邮", "到付"],
      goodsList: [
        {
          id: 1,
          goodsImg: "../../static/iphone.jpg",
          title:
            "iPhone14 Pro Max 国行5G 移动联通电信 双卡双待手机, 快来看看吧",
          typeList: ["全新", "包邮", "可买断"],
          price: 1.97,
          discount: 0.03,
          firstMon: 1,
        },
        {
          id: 2,
          goodsImg: "../../static/iphone.jpg",
          title:
            "iPhone14 Pro Max 国行5G 移动联通电信 双卡双待手机, 快来看看吧",
          typeList: ["全新", "包邮", "可买断"],
          price: 1.97,
          discount: 0.03,
          firstMon: 1,
        },
        {
          id: 3,
          goodsImg: "../../static/iphone.jpg",
          title:
            "iPhone14 Pro Max 国行5G 移动联通电信 双卡双待手机, 快来看看吧",
          typeList: ["全新", "包邮", "可买断"],
          price: 1.97,
          discount: 0.03,
          firstMon: 1,
        },
        {
          id: 4,
          goodsImg: "../../static/iphone.jpg",
          title:
            "iPhone14 Pro Max 国行5G 移动联通电信 双卡双待手机, 快来看看吧",
          typeList: ["全新", "包邮", "可买断"],
          price: 1.97,
          discount: 0.03,
          firstMon: 1,
        },
        {
          id: 5,
          goodsImg: "../../static/iphone.jpg",
          title:
            "iPhone14 Pro Max 国行5G 移动联通电信 双卡双待手机, 快来看看吧",
          typeList: ["全新", "包邮", "可买断"],
          price: 1.97,
          discount: 0.03,
          firstMon: 1,
        },
      ],
    };
  },
  methods: {
    tab(i) {
      this.active = i;
    },
    tabExpress(i) {
      this.active1 = i;
    },
  },
};
</script>
<style scoped>
.container {
  width: 70%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 0.1rem;
  margin-top: 1%;
}
.search-msg,
.search-type,
.range {
  padding: 2% 4%;
}
.search-type {
  display: flex;
  align-items: center;
}
.search-type span {
  margin: 0 2% 0 0;
  cursor: pointer;
}
.active {
  color: #ff0000;
}
.range {
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
}
.range input {
  width: 15%;
  outline: none;
  background-color: #eee;
  border: 1px solid #eee;
  border-radius: 0.05rem;
}
.express {
  padding: 1% 2%;
  background-color: #eee;
  border-radius: 0.05rem;
  margin: 0 0 0 2%;
  cursor: pointer;
}
.active1 {
  background-color: #ff0000;
  color: #fff;
}
</style>

<style>
.container .el-divider--horizontal {
  margin: 0;
}
</style>